<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <style>
		body{
			background-color:transparent;
		}
		#personalCenter{
			height:100px;
			width:100%;
		}
		#personalCenter #noLogin{
			padding-top:40px;
			margin:0 auto;
			width:48px;
			color:#888888;
			font-weight:bold;
		}
		#personalCenter #accountPanel{
			margin-top:8px;
			height:80px;
			padding:5px;
		}
		#personalCenter #accountPanel img{
			height:80px;
		}
		#personalCenter #accountPanel .col-xs-12{
			font-size:18px;
			padding-top:10px;
			text-align:left;
		}
		ul{
			margin:5px 0px;
			background:#FFF;
			border-top:#DEDFE0 1px solid;
			border-bottom:#DEDFE0 1px solid;
			overflow:hidden;
		}
		ul li{
			font-size:16px;
			padding:12px;
			border-bottom:#DFDFE0 1px solid;
		}
		ul .last{
			font-size:16px;
			padding:12px;
			border-bottom:none;
		}
		.active{
			background:#F6F6F6;
		}
		.col-xs-4{
	    	text-align:right;
	    }
	    .col-xs-4 span{
	    	color:#C7C7C7;
	    }
	    .col-xs-8 span{
	    	color:#B6B6B6;
	    }
	    #logOutPanel{
	    	margin-top:20px;
	    }
	    #logOutPanel .col-xs-12{
	    	text-align:center;
	    	color:#FF0000;
	    }
	    #noLogin,#noLoginPanel,#accountPanel,#loginPanel,#logOutPanel{
	    	display:none;
	    }
	</style>
</head>
<body>
<div id="personalCenter" class="container-fluid">
	<div id="noLogin" class="row">未登录</div>
	<div id="accountPanel">
		<div class="row">
			<div class="col-xs-4">
				<img src="../icon/icon150x150.png" class="img-responsive img-circle">
			</div>
			<div class="col-xs-8">
				<div class="row">
					<div class="col-xs-12" style="color:#3B3B3B;">菜谱百科</div>
					<div class="col-xs-12" style="color:#AEAEAE;">帐户：cookwiki</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row" id="noLoginPanel">
		<ul>
			<li tapmode="active" onclick="openWin('favorites','favorites.html',null)">
				<div class="row">
					<div class="col-xs-8">
						<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;登录帐户
					</div>
					<div class="col-xs-4">
						<img src="../res/listArrow.png" width="9" height="16">
					</div>
				</div>
			</li>
			<li class="last" tapmode="active" onclick="openWin('register','./register.html',null)">
				<div class="row">
					<div class="col-xs-8">
						<span class="glyphicon glyphicon-plus-sign"></span>&nbsp;&nbsp;免费注册
					</div>
					<div class="col-xs-4">
						<img src="../res/listArrow.png" width="9" height="16">
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="row" id="loginPanel">
		<ul>
			<li class="last" tapmode="active" onclick="openWin('favorites','./favorites.html',null)">
				<div class="row">
					<div class="col-xs-8">
						<span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;帐户管理
					</div>
					<div class="col-xs-4">
						<img src="../res/listArrow.png" width="9" height="16">
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="row">
		<ul>
			<li tapmode="active" onclick="openWin('favorites','favorites.html',null)">
				<div class="row">
					<div class="col-xs-8">
						<span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏
					</div>
					<div class="col-xs-4">
						<img src="../res/listArrow.png" width="9" height="16">
					</div>
				</div>
			</li>
			<li class="last" tapmode="active" onclick="api.toast({msg: '暂未上线',duration:2000,location: 'bottom'})">
				<div class="row">
					<div class="col-xs-8">
						<span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;我的评论
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="row" id="logOutPanel">
		<ul>
			<li class="last" tapmode="active" onclick="openWin('favorites','favorites.html',null)">
				<div class="row">
					<div class="col-xs-12">
						退出登录
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<div style="height:50px;"></div>
</body>


<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/laytpl.js"></script>
<script type="text/javascript" src="../script/DBapi.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">

apiready = function(){
	var loginState = $api.getStorage('loginInfo');
	
	if(loginState){
		$("#noLogin").hide();
		$("#noLoginPanel").hide();
		$("#accountPanel").show();
		$("#loginPanel").show();
		$("#logOutPanel").show();
	}
	else{
		$("#noLogin").show();
		$("#noLoginPanel").show();
		$("#accountPanel").hide();
		$("#loginPanel").hide();
		$("#logOutPanel").hide();
	}
};
</script>
</html>